import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '../stores/user' // 导入user store
import { ElMessageBox } from 'element-plus'
import { h } from 'vue'

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: () => import('../views/Layout.vue'),
    children: [
      {
        path: '',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isPublic: true } // 首页是公开的
      },
      {
        path: 'courses',
        name: 'Courses',
        component: () => import('../views/Courses.vue'),
        meta: { isPublic: true } // 课程列表页是公开的
      },
      {
        path: '/course/:id',
        name: 'courseDetail',
        component: () => import('../views/CourseDetail.vue'),
        meta: { isPublic: true } // 课程详情页是公开的
      },
      {
        path: 'material-viewer/:courseId/:chapterId/:materialId?',
        name: 'materialViewer',
        component: () => import('../views/MaterialViewer.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('../views/UserProfile.vue'),
        meta: { requiresAuth: true } // 个人中心需要认证
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: { isPublic: true }
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    meta: { isPublic: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由守卫
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore() // 在守卫中使用store

  // 如果是公开页面，直接放行
  if (to.meta.isPublic) {
    next()
    return
  }

  // 检查登录状态
  if (!userStore.isLoggedIn) {
    await userStore.fetchUserInfo()
  }

  if (!userStore.isLoggedIn) {
    // 显示登录提示弹窗
    try {
      await ElMessageBox({
        title: '温馨提示',
        message: h('div', { class: 'login-tip' }, [
          h('div', { class: 'login-tip-icon' }, '🔒'),
          h('div', { class: 'login-tip-text' }, '请先登录后再访问该页面'),
          h('div', { class: 'login-tip-subtext' }, '登录后即可享受完整功能')
        ]),
        showCancelButton: true,
        confirmButtonText: '去登录',
        cancelButtonText: '回到首页',
        customClass: 'login-message-box',
        confirmButtonClass: 'login-confirm-button',
        cancelButtonClass: 'login-cancel-button',
        type: 'warning',
        center: true,
        roundButton: true,
        distinguishCancelAndClose: true,
        beforeClose: (action, instance, done) => {
          if (action === 'close') {
            next('/')
          }
          done()
        }
      })
      // 用户点击"去登录"
      next('/login')
    } catch {
      // 用户点击"回到首页"或关闭弹窗
      next('/')
    }
  } else {
    next()
  }
})

// 添加自定义样式
const style = document.createElement('style')
style.textContent = `
  .login-message-box {
    border-radius: 12px !important;
    padding: 20px !important;
  }
  
  .login-message-box .el-message-box__header {
    padding: 20px 20px 10px !important;
  }
  
  .login-message-box .el-message-box__title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }
  
  .login-message-box .el-message-box__content {
    padding: 20px !important;
  }
  
  .login-tip {
    text-align: center;
    padding: 10px 0;
  }
  
  .login-tip-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }
  
  .login-tip-text {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .login-tip-subtext {
    font-size: 14px;
    color: #666;
  }
  
  .login-message-box .el-message-box__btns {
    padding: 10px 20px 20px !important;
  }
  
  .login-confirm-button {
    background-color: #409EFF !important;
    border-color: #409EFF !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
  }
  
  .login-confirm-button:hover {
    background-color: #66b1ff !important;
    border-color: #66b1ff !important;
    transform: translateY(-1px) !important;
  }
  
  .login-cancel-button {
    color: #666 !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
  }
  
  .login-cancel-button:hover {
    color: #333 !important;
    background-color: #f5f7fa !important;
    transform: translateY(-1px) !important;
  }
`
document.head.appendChild(style)

export default router
